<template>
<div>
  <section class="container">
  <div class="row">
    <div class="col-md-5">
      <form @submit.prevent="addTopic">
        <div class="form-group">
          <label for="exampleInputEmail1">选择板块</label>
          <select class="form-control">
            <option>分享</option>
            <option>问答</option>
            <option>招聘</option>
            <option>客户端测试</option>
          </select>
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">标题</label>
          <input type="text" v-model="fromData.title" class="form-control" id="exampleInputEmail1" required>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">内容</label>
          <textarea class="form-control" v-model="fromData.content"  rows="3"></textarea>
        </div>
        <p>{{ errData }}</p>
        <button type="submit" class="btn btn-default">提交</button>
      </form>
    </div>
  </div>
</section>
</div>

</template>

<script>
  import AppHeader from '../home/Header.vue'
  import axios from 'axios'
  export default {
    data () {
      return {
        fromData: {
          title: '',
          content: ''
        },
        errData: ''
      }
    },
    methods: {
      addTopic: _.debounce(async function () {
        try {
          if (!this.fromData.content) {
            return window.alert("请填写话题内容")
          }
        const {data} = await axios.post('/api/topics', this.fromData)
        this.$router.push(`/topics/show/${data[0].id}`)
        } catch(err) {
        const {status} = err.request
        switch (status) {
          case 401:
            window.alert("发布话题失败,需要登录")
            break;
          default:
            // statements_def
            break;
        }
        }
      },500)
    }
  }
</script>

<style>
  
</style>